import React, { Component } from 'react';
import axios from 'axios';
import { Spin } from 'antd';
// import $ from  'jquery';
import './UserList.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
        pop : this.props.match.params.id,
        loading : true,
        List : []
    }
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=user&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
            List : data.data.data.userprofiles,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  render () {
    return (
      <div className = "UserList">
        <ul>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.List.map((item, index) => {
            return (
              <li key={ item.userId }>
                <p>
                  <img src={item.avatarUrl} alt=""/>
                  { item.nickname }
                </p>
                <span>歌单：{ item.playlistCount }</span>
                <b>粉丝数：{ item.playlistBeSubscribedCount }</b>
                <button className="iconfont icon-add1">关注</button>
              </li>
            )
            })
          }
        </ul>
      </div>
    )
  }
}

export default Com;
